<template>
  <g :transform="`translate(${x}, ${y})`">
    <!-- 定义渐变和阴影 -->
    <defs>
      <!-- 货架金属渐变 -->
      <linearGradient id="shelf-metal" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:#d1d1d1;stop-opacity:1" />
        <stop offset="50%" style="stop-color:#e9e9e9;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#d1d1d1;stop-opacity:1" />
      </linearGradient>
      <!-- 货架阴影 -->
      <filter id="shelf-shadow" x="-20%" y="-20%" width="140%" height="140%">
        <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
        <feOffset dx="2" dy="2" result="offsetblur"/>
        <feComponentTransfer>
          <feFuncA type="linear" slope="0.3"/>
        </feComponentTransfer>
        <feMerge>
          <feMergeNode/>
          <feMergeNode in="SourceGraphic"/>
        </feMerge>
      </filter>
    </defs>

    <!-- 货架主体 -->
    <g class="shelf-body" filter="url(#shelf-shadow)">
      <!-- 立柱 -->
      <rect x="0" y="0" width="10" height="240" fill="url(#shelf-metal)" stroke="#999" stroke-width="1"/>
      <rect x="190" y="0" width="10" height="240" fill="url(#shelf-metal)" stroke="#999" stroke-width="1"/>
      
      <!-- 层板 -->
      <g v-for="(layer, index) in 3" :key="layer">
        <rect 
          x="0" 
          :y="index * 80" 
          width="200" 
          height="10" 
          fill="url(#shelf-metal)"
          stroke="#999"
          stroke-width="1"
        />
        
        <!-- 货位区域 -->
        <rect
          x="10"
          :y="index * 80 + 10"
          width="180"
          height="70"
          :fill="layerStatus[index] === 'occupied' ? '#e6f7ff' : '#ffffff'"
          stroke="#d9d9d9"
          stroke-width="1"
          rx="2"
          ry="2"
        />
        
        <!-- 货位编号 -->
        <text
          x="100"
          :y="index * 80 + 45"
          text-anchor="middle"
          alignment-baseline="middle"
          class="shelf-text"
        >
          {{ layerNumbers[index] }}
        </text>
      </g>
      
      <!-- 底座 -->
      <rect x="-10" y="240" width="220" height="20" fill="url(#shelf-metal)" stroke="#999" stroke-width="1"/>
    </g>
  </g>
</template>

<script setup lang="ts" name="ShelfFrontView">
defineProps<{
  x: number
  y: number
  layerStatus: ('empty' | 'occupied')[]
  layerNumbers: number[]
}>()

// Add default export
defineOptions({
  name: 'ShelfFrontView'
})
</script>

<style scoped>
.shelf-text {
  font-size: 14px;
  fill: #595959;
  user-select: none;
  font-weight: 500;
}
</style> 